<script setup>
defineOptions({
  name: 'CancelButton'
})
const props = defineProps({
  loading: Boolean,
  btnText: {
    type: String,
    default: '取消'
  },
  size: {
    type: String,
    default: 'large',
    validator: size => ['small', 'medium', 'large'].includes(size)
  }
})
const emit = defineEmits(['on-cancel'])

</script>
<template>
  <template v-if="props.loading">
    <ElPopconfirm place :title="`数据上传中,确定要取消保存吗？`" @confirm="emit('on-cancel')" style="width: 400px;">
      <template #reference>
        <ElButton :size="props.size" plain style="margin-left: var(--space-primary);">
          {{ props.btnText }}
        </ElButton>
      </template>
    </ElPopconfirm>
  </template>
  <template v-else>
    <ElButton size="large" @click="emit('on-cancel')">{{ props.btnText }}</ElButton>
  </template>
</template>
